<template>
  <div>
    <avue-crud
      ref="crud"
      :data="dataList"
      :option="option"
      @search-change="searchChange"
      @row-save="rowSave"
      @row-del="rowDel"
      v-model:page="page"
      @on-load="onLoad"
    >
      <template #menu-left="{}">
        <el-button
          type="danger"
          icon="el-icon-plus"
          @click="$refs.crud.rowAdd()"
          >新增</el-button
        >
      </template>
      <!-- <template #slot="scope">
        <avue-switch
          :value="scope.row.state == 1 ? true : false"
          @click="rowState(scope.row)"
        ></avue-switch>
      </template> -->
      <template #state="scope">
        <div style="display: flex; align-items: center">
          <el-switch
            v-model="scope.row.state"
            class="ml-2"
            style="--el-switch-on-color: #19b8cb; --el-switch-off-color: #ccc"
          />
        </div>
      </template>
    </avue-crud>
    <el-button @click="add" class="addCar">新增车次</el-button>
    <AddStation
      @closeTan="close"
      @confirm="delete2"
      :dialogVisible="dialogVisible"
    />
  </div>
</template>

<script setup>
import { useSlots } from "vue";
import { getTick } from "../../hooks/get.js";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import axios from "axios";
import AddStation from "@/components/AddStation.vue";
import { defaultAxios } from "@/utils/request";
import { timestampToTime } from "@/utils/dataTime";

let dataList = ref([]);
let list = ref([]);
let dialogVisible = ref(false);
let lines = ref([]);
// const form = true;
let page = ref({
  pageSize: 10,
  currentPage: 1,
  layout: "total,pager,prev, next",
});
let text = ref(false);
let option = ref({
  align: "left",
  menuAlign: "center",
  addBtn: false,
  searchBtn: true,
  searchMenuSpan: 1,
  emptyBtn: false,
  index: true,
  indexLabel: "ID",
  column: [
    {
      label: "车次/类型",
      prop: "trips",
      search: false,
    },
    {
      label: "",
      prop: "startStation",
      search: false,
    },
    {
      label: "线路",
      prop: "lines",
      search: false,
    },
    {
      label: "创建时间",
      prop: "create_time",
      type: "datetime",
      search: false,
    },
    {
      label: "状态",
      prop: "state",
      slot: true,
      search: true,
      dicData: [
        {
          label: "停用",
          value: false,
        },
        {
          label: "启用",
          value: true,
        },
      ],
    },
  ],
});
onMounted: {
  defaultAxios.get("/trips").then((res) => {
    console.log(res);
    dataList.value = res.list.slice(0, 10);
    page.value.total = res.list.length;
    list.value = res.list;
  });
}
function rowSave(row, done, loading) {
  done({
    create_time: timestampToTime(new Date(row.create_time).getTime()),
    lines:
      "① 北京西 → ② 石家庄 → ③ 郑州东 → ④ 武汉 → ⑤ 长沙南 → ⑥怀化南 → ⑦贵阳北 → ⑧ 昆明南",
    startStation: "北京西-昆明南",
    state: row.state,
    trips: row.trips,
  });
  ElMessage({
    showClose: true,
    message: "添加成功 ",
    type: "success",
  });
}
function rowDel(row, index, done) {
  console.log(index);
  done(row);
}
const onLoad = (page) => {
  page.total = list.value.length;
  //模拟分页
  if (page.currentPage === 1) {
    dataList.value = list.value.slice(
      (page.currentPage - 1) * 10,
      page.currentPage * 10
    );
  } else if (page.currentPage == 2) {
    dataList.value = list.value.slice(
      (page.currentPage - 1) * 10,
      page.currentPage * 10
    );
  }
};
const add = () => {
  dialogVisible.value = true;
};
const close = (val) => {
  dialogVisible.value = val;
};

const delete2 = (val) => {
  dialogVisible.value = val.dialogVisible;
  lines.value = val.arr1;
  console.log(lines.value);
  dataList.value.push({
    create_time: "2023-03-30 16:20:06",
    lines: `① ${lines.value[0].label} → ②${lines.value[1].label} → ③ 郑州东 →  ④ 武汉 → ⑤ 长沙南 →  ⑥怀化南 → ⑦贵阳北 → ⑧ 昆明南`,
    name: "锺娜",
    startStation: "北京西-昆明南",
    state: false,
    sum: 713,
    total: 846,
    trips: "G71高铁",
  });
};
const searchChange = (params, done) => {
  console.log(params.state);
  if (params.state) {
    let status = params.state == "启用" ? true : false;
    setTimeout(() => {
      dataList.value = dataList.value.filter((item) => {
        return item.state == status;
      });
      done();
    }, 1000);
  } else {
    dataList.value = list.value;
    done();
  }
};
</script>

<style>
.addCar {
  position: fixed;
  top: 15%;
  right: 15%;
  z-index: 10;
}
</style>
